<template>
	<view>
		<view class="header" :style="diap.style">
			<view class="title_box flex">
				<view class="left_icon flex">
					<u-icon color="#ffffff" name="map" size="40"></u-icon>
					<text class="text">成都</text>
				</view>
				<view class="title">懂钱弟</view>
				<view class="icon_r" @click="handleMsg">
					<image class="msg" src="/static/icon/xiao_xi.png" mode="scaleToFill" />
					<text class="msg_num" v-if="resultInit.notice > 0">{{ resultInit.notice }}</text>
				</view>
			</view>
		</view>
		<view class="top_bg"></view>
		<view class="content">
			<!-- 是否认证 -->
			<view class="top_msg">
				<userNo v-if="on_line"></userNo>
				<userYes v-else :obj="resultInit.on_line"></userYes>
			</view>
			<u-gap height="24" bgColor="#f5f5f5"></u-gap>
			<!-- banner -->
			<view class="banner">
				<u-swiper :list="list" mode="none" height="200"></u-swiper>
			</view>
			<u-gap height="24" bgColor="#f5f5f5"></u-gap>
			<!-- 网红贷 -->
			<view class="hot_box flex">
				<view class="hot_icon flex">
					<image class="hot" src="/static/icon/wnag_hong_dai@3x.png" mode="scaleToFill" />
					<text>网红贷款</text>
				</view>
				<view class="hot_more flex" @click="handleMore">
					<text>更多产品</text>
					<u-icon color="#3478f2" name="arrow-right-double" size="16"></u-icon>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in red" :class="{ tran: item.is_ask == 1 }" :key="item.product_id" @click="openView">
					<view class="icon" :class="`icon${text(item.label)}`">{{ item.label }}</view>
					<view class="logo">
						<image :src="item.logo" mode="scaleToFill" />
					</view>
					<view class="name">{{ item.name }}</view>
					<view class="money">{{ item.quota }}元</view>
					<view class="apr">年利率{{ item.rate }}%起</view>
					<view class="number" v-if="item.is_ask != 1">近一周{{ item.week }}人申请</view>
					<view class="no" v-else>{{ item.apply_num_des }}</view>
					<image v-if="item.is_ask == 1" class="icon_man" src="/static/icon/e_du_yi_man@3x.png" mode="scaleToFill" />
				</view>
			</view>
			<view class="declare">
				本平台将竭力保护用户
				<text>信息安全</text>
				，所有产品推广仅供参考近期贷款诈骗频频发生，凡是以平台名义提前收取费用的隐私及注册协议请以
				<text>合作方的产品申明为准</text>
				，贷款过程中遇到任何
				<text>预先收费均为诈骗行为</text>
				，请保持警惕避免损失
			</view>
			<view class="protocol">
				点击查看
				<text>《免责申明》</text>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup v-model="show" :round="true" @close="handleClose" closeable border-radius="16" mode="center">
			<HomePop />
		</u-popup>
		<!-- <u-empty text="服务器错误..." margin-top="200" icon-size="400" src="/static/icon/err.png">
			<view slot="bottom">
				<view class="err_btn headle">请联系管理员</view>
			</view>
		</u-empty> -->
		<view style="height: 100px"></view>
	</view>
</template>

<script>
import userYes from './components/userYes.vue'
import userNo from '@/pages/home/components/userNo.vue'
import HomePop from '@/pages/home/components/popConten.vue'
import ajax from '@/api'
export default {
	data() {
		return {
			resultInit: {},
			list: [],
			red: [],
			show: false,
			on_line: [],
			pageScrollTop: 0 // 页面滚动距离
		}
	},
	watch: {
		resultInit() {
			if (Object.prototype.toString.call(this.resultInit?.on_line).slice(8, -1) == 'Object') {
				this.on_line = false
			} else {
				this.on_line = true
			}
		}
	},
	components: { HomePop, userNo, userYes },
	computed: {
		diap() {
			let val = this.pageScrollTop / 45
			return {
				style: `background-color: rgba(52,120,242,${val >= 1 ? 1 : val});`
			}
		}
	},
	onShow() {
		this.init()
	},
	// 页面滚动监听
	onPageScroll(e) {
		this.pageScrollTop = Math.floor(e.scrollTop)
	},
	methods: {
		text(val) {
			switch (val) {
				case '通过率高':
					return 1
				case '利息低':
					return 2
				case '额度高':
					return 3
				case '下款快':
					return 4
			}
		},
		async init() {
			try {
				const result = await ajax.getHome()
				console.log(result)
				this.resultInit = result
				//网红产品
				this.red = result.red
				this.on_line = result.on_line
				//banner
				this.list = result.banner.map((item) => {
					item.image = item.img
					return item
				})
			} catch (error) {
				console.log(error)
			}
		},
		openView() {
			uni.navigateTo({
				url: '/pages/auth/material'
			})
		},
		handleClose() {
			this.show = false
		},
		handleMsg() {
			uni.navigateTo({
				url: '/pages/msg/index'
			})
		},
		handleMore() {
			uni.switchTab({
				url: '/pages/loans/index'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.banner {
	height: 200rpx;
}
.list {
	margin-top: 18rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.tran {
	opacity: 0.5;
}
.item {
	position: relative;
	width: 328rpx;
	height: 336rpx;
	background: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 30rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	// justify-content: center;
	.icon_man {
		position: absolute;
		width: 136rpx;
		height: 136rpx;
		z-index: 9;
		left: -16rpx;
		top: -14rpx;
	}
	.icon {
		width: 146rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		// padding-right: 24rpx;
		position: absolute;
		top: -1rpx;
		right: -1rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.icon1 {
		background: url('@/static/icon/lan_zi@3x.png');
		background-size: 100%;
	}
	// 利息低
	.icon2 {
		background: url('@/static/icon/lan@3x.png');
		background-size: 100%;
	}
	//额度高
	.icon3 {
		background: url('@/static/icon/ju@3x.png');
		background-size: 100%;
	}
	//下款快
	.icon4 {
		background: url('@/static/icon/hong@3x.png');
		background-size: 100%;
	}
	.logo {
		width: 64rpx;
		height: 64rpx;
		margin-top: 58rpx;
		border-radius: 8rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.no {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #3478f2;
		margin-top: 4rpx;
	}
	.name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 12rpx;
	}
	.money {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #fc1f1f;
		margin-top: 8rpx;
	}
	.apr {
		width: 178rpx;
		height: 42rpx;
		line-height: 42rpx;
		background: #eff4ff;
		border-radius: 8rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #969799;
		margin-top: 12rpx;
	}
	.number {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #adadad;
		margin-top: 12rpx;
	}
}
.hot_box {
	justify-content: space-between;
	align-items: flex-end;
	.hot_icon {
		.hot {
			width: 34rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 4rpx;
		}
	}
	.hot_more {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3478f2;
	}
}
.content {
	padding: 0 32rpx;
	position: relative;
	top: -164rpx;
}
.flex {
	display: flex;
	align-items: center;
}
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding-top: var(--status-bar-height);
	z-index: 10;
	background-color: #0481fe;
	color: rgba(255, 255, 255, 0.8);
	.title_box {
		height: 44px;
		padding: 0 32rpx;
		justify-content: space-between;
		.title {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			flex: 1;
			text-indent: 5em;
		}
		.left_icon {
			.text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				margin-left: 12rpx;
			}
		}
		.icon_r {
			width: 40rpx;
			height: 44rpx;
			position: relative;
			.msg {
				width: 100%;
				height: 100%;
			}
			.msg_num {
				width: 32rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				background: #fc1f1f;
				border-radius: 50%;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #ffffff;
				position: absolute;
				right: -30%;
				top: -30%;
			}
		}
	}
}
.top_bg {
	height: 380rpx;
	background: linear-gradient(180deg, #0481fe 0%, #b6e9ff 100%);
}
.top_msg {
	width: 686rpx;
	height: 490rpx;
	background: #ffffff;
	box-shadow: 0px 6px 12px rgba(11, 137, 254, 0.08);
	border-radius: 16rpx;
}
.declare {
	width: 600rpx;
	font-size: 25rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 034rpx;
	color: #969799;
	margin: 0 auto;
	margin-top: 108rpx;
	text {
		color: #464646;
	}
}
.protocol {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #969799;
	text-align: center;
	text {
		color: #3478f2;
	}
	padding-bottom: 126rpx;
}
</style>
